<template>
  <div class="content">
    <el-row>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>权限列表</span>
          </div>
          <el-tree
            :data="treeData"
            :props="defaultProps"
            default-expand-all
            @node-click="handleNodeClick"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <el-button
                  type="text"
                  size="mini"
                  @click.stop="() => remove(data)"
                >
                  删除
                </el-button>
              </span>
            </span>
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="12">
        <PermissionEdit
          @refresh="getTree()"
          :info="permissionInfo"
          :tree="treeData"
        ></PermissionEdit>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { get, del } from "@/api/base.js";
import PermissionEdit from "./edit.vue";
export default {
  name: "permission",
  components: {
    PermissionEdit,
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      permissionInfo: {},
    };
  },
  computed: {},
  created() {
    this.getTree();
  },
  methods: {
    handleNodeClick(data) {
      // console.log(data);
      this.getPermissionInfo(data.value);
    },
    getTree() {
      get("tree/permission").then((res) => {
        this.treeData = res.data;
      });
    },
    getPermissionInfo(id) {
      get(`permission/${id}`).then((res) => {
        this.permissionInfo = res.data;
      });
    },
    remove(data) {
      del("permission", data.value).then((res) => {
        this.$message.success("删除成功");
        this.getTree();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  margin: 10px;
  padding: 10px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>

